import React, { Component } from 'react';
import * as PropTypes from 'prop-types';
import { compose, propOr } from 'ramda';
import { createFragmentContainer } from 'react-relay';
import graphql from 'babel-plugin-relay/macro';
import { withStyles } from '@material-ui/core/styles';
import Paper from '@material-ui/core/Paper';
import Typography from '@material-ui/core/Typography';
import List from '@material-ui/core/List';
import ListItem from '@material-ui/core/ListItem';
import ListItemIcon from '@material-ui/core/ListItemIcon';
import { Launch } from '@material-ui/icons';
import ListItemText from '@material-ui/core/ListItemText';
import Grid from '@material-ui/core/Grid';
import { AtomVariant, Translate, BasketOutline } from 'mdi-material-ui';
import Chip from '@material-ui/core/Chip';
import inject18n from '../../../../components/i18n';
import ExpandableMarkdown from '../../../../components/ExpandableMarkdown';
import ItemBoolean from '../../../../components/ItemBoolean';

const styles = () => ({
  paper: {
    height: '100%',
    minHeight: '100%',
    margin: '10px 0 0 0',
    padding: '15px',
    borderRadius: 6,
  },
  item: {
    paddingLeft: 10,
    transition: 'background-color 0.1s ease',
    '&:hover': {
      background: 'rgba(0, 0, 0, 0.1)',
    },
  },
  chip: {
    fontSize: 12,
    lineHeight: '12px',
    backgroundColor: 'rgba(0, 150, 136, 0.3)',
    color: '#ffffff',
    textTransform: 'uppercase',
    borderRadius: '0',
    margin: '0 5px 5px 0',
  },
});

class MalwareDetailsComponent extends Component {
  render() {
    const {
      t, fd, classes, malware,
    } = this.props;
    const architectureExecutionEnvs = malware.architecture_execution_envs
      ? malware.architecture_execution_envs
      : [t('Unknown')];
    const implementationLanguages = malware.implementation_languages
      ? malware.implementation_languages
      : [t('Unknown')];
    const capabilities = malware.capabilities
      ? malware.capabilities
      : [t('Unknown')];
    return (
      <div style={{ height: '100%' }}>
        <Typography variant="h4" gutterBottom={true}>
          {t('Details')}
        </Typography>
        <Paper classes={{ root: classes.paper }} elevation={2}>
          <Grid container={true} spacing={3}>
            <Grid item={true} xs={6}>
              <Typography variant="h3" gutterBottom={true}>
                {t('Is family')}
              </Typography>
              <ItemBoolean
                status={malware.is_family}
                label={malware.is_family ? t('Yes') : t('No')}
              />
              <Typography
                variant="h3"
                gutterBottom={true}
                style={{ marginTop: 20 }}
              >
                {t('Description')}
              </Typography>
              <ExpandableMarkdown source={malware.description} limit={400} />
              <Typography
                variant="h3"
                gutterBottom={true}
                style={{ marginTop: 20 }}
              >
                {t('Architecture execution env.')}
              </Typography>
              <List>
                {architectureExecutionEnvs.map((architectureExecutionEnv) => (
                  <ListItem
                    key={architectureExecutionEnv}
                    dense={true}
                    divider={true}
                  >
                    <ListItemIcon>
                      <AtomVariant />
                    </ListItemIcon>
                    <ListItemText primary={architectureExecutionEnv} />
                  </ListItem>
                ))}
              </List>
              <Typography
                variant="h3"
                gutterBottom={true}
                style={{ marginTop: 20 }}
              >
                {t('Implementation languages')}
              </Typography>
              <List>
                {implementationLanguages.map((implementationLanguage) => (
                  <ListItem
                    key={implementationLanguage}
                    dense={true}
                    divider={true}
                  >
                    <ListItemIcon>
                      <Translate />
                    </ListItemIcon>
                    <ListItemText primary={implementationLanguage} />
                  </ListItem>
                ))}
              </List>
            </Grid>
            <Grid item={true} xs={6}>
              <Typography variant="h3" gutterBottom={true}>
                {t('Malware types')}
              </Typography>
              {propOr(['-'], 'malware_types', malware).map((malwareType) => (
                <Chip
                  key={malwareType}
                  classes={{ root: classes.chip }}
                  label={malwareType}
                />
              ))}
              <Typography
                variant="h3"
                gutterBottom={true}
                style={{ marginTop: 20 }}
              >
                {t('First seen')}
              </Typography>
              {fd(malware.first_seen)}
              <Typography
                variant="h3"
                gutterBottom={true}
                style={{ marginTop: 20 }}
              >
                {t('Last seen')}
              </Typography>
              {fd(malware.last_seen)}
              <Typography
                variant="h3"
                gutterBottom={true}
                style={{ marginTop: 20 }}
              >
                {t('Kill chain phases')}
              </Typography>
              <List>
                {malware.killChainPhases.edges.map((killChainPhaseEdge) => {
                  const killChainPhase = killChainPhaseEdge.node;
                  return (
                    <ListItem
                      key={killChainPhase.phase_name}
                      dense={true}
                      divider={true}
                      classes={{ root: classes.item }}
                    >
                      <ListItemIcon classes={{ root: classes.itemIcon }}>
                        <Launch />
                      </ListItemIcon>
                      <ListItemText primary={killChainPhase.phase_name} />
                    </ListItem>
                  );
                })}
              </List>
              <Typography
                variant="h3"
                gutterBottom={true}
                style={{ marginTop: 20 }}
              >
                {t('Capabilities')}
              </Typography>
              <List>
                {capabilities.map((capability) => (
                  <ListItem key={capability} dense={true} divider={true}>
                    <ListItemIcon>
                      <BasketOutline />
                    </ListItemIcon>
                    <ListItemText primary={capability} />
                  </ListItem>
                ))}
              </List>
            </Grid>
          </Grid>
        </Paper>
      </div>
    );
  }
}

MalwareDetailsComponent.propTypes = {
  malware: PropTypes.object,
  classes: PropTypes.object,
  t: PropTypes.func,
  fld: PropTypes.func,
};

const MalwareDetails = createFragmentContainer(MalwareDetailsComponent, {
  malware: graphql`
    fragment MalwareDetails_malware on Malware {
      id
      description
      malware_types
      is_family
      first_seen
      last_seen
      architecture_execution_envs
      implementation_languages
      capabilities
      creator {
        id
        name
      }
      killChainPhases {
        edges {
          node {
            id
            kill_chain_name
            phase_name
            x_opencti_order
          }
        }
      }
      objectLabel {
        edges {
          node {
            id
            value
            color
          }
        }
      }
    }
  `,
});

export default compose(inject18n, withStyles(styles))(MalwareDetails);
